<template>
  <el-dialog :title="model.id?'编辑角色':'添加角色'" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
    <el-form ref="dataForm" :rules="modelRules" :model="model" label-width="130px">
      <el-form-item label="角色编码" prop="name">
        <el-input v-model="model.name" placeholder="角色编码"/>
      </el-form-item>
      <!-- <el-form-item label="角色显示名称" prop="displayName">
        <el-input v-model="model.displayName" placeholder="角色显示名称"/>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="model.description" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="描述"/>
      </el-form-item>
      <el-form-item prop="isDefault">
        <el-checkbox v-model="model.isDefault">默认角色</el-checkbox>
      </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" :loading="isSubmitLoading" @click="save()">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getRoleForEdit, createOrUpdateRole } from "@/api/role";

export default {
  data() {
    return {
      dialogVisible: false,
      isSubmitLoading: false,
      model: {
        id: undefined,
        name: "",
        // displayName: "",
        // isDefault: false,
        // description: ""
      },
      modelRules: {
        name: [{ required: true, trigger: "blur", message: "请输入角色编码" }],
        // displayName: [
        //   { required: true, trigger: "blur", message: "请输入角色显示名称" }
        // ],
        // isDefault: [{ required: true }]
      }
    };
  },
  methods: {
    show(id) {
      this.resetModal();
      this.isSubmitLoading = false;
      if (id) {
        getRoleForEdit(id).then(result => {
          this.model = result;
          this.dialogVisible = true;
          this.$nextTick(() => {
            this.$refs["dataForm"].clearValidate();
          });
        });
      } else {
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      }
    },
    resetModal() {
      this.model = {
        id: undefined,
        name: "",
        // displayName: "",
        // isDefault: false,
        // description: ""
      };
    },
    save() {
      this.isSubmitLoading = true;
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          createOrUpdateRole(this.model)
            .then(() => {
              this.$message({
                message: this.model.id ? "编辑成功" : "添加成功",
                type: "success"
              });
              this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
              this.close();
              this.$emit("save");
            })
            .catch(() => {
              this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
            });
        } else {
          this.isSubmitLoading = false;
          this.$message({
            message: this.$t("formIsNotValidMessage"),
            type: "warning"
          });
        }
      });
    },
    close() {
      this.dialogVisible = false;
      this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
    }
  }
};
</script>
